<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{dialogTitle}}
      <div class="my-define-dialog-title-btn">
        <i @click="submitForm" class="saas-iconfont saas-icon-baocun1"></i>
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-scrollbar :style="customeStyle">
      <el-row class="my-search-row">
        <el-col :span="24">
          <el-form :inline="true">
            <el-form-item label="关键字">
              <el-input size="mini" v-model="queryParams.queryText" placeholder="姓名,手机号码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="getList">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24">
          <el-table :height="tableHeight-230" v-loading="loading" ref="tableGrid" :data="tableData" border
            style="width: 100%">
            <el-table-column type="selection" width="60" align="center" />
            <el-table-column prop="LoginName" label="登录名" align="center" />
            <el-table-column prop="UserName" label="姓名" align="center" />
            <el-table-column prop="ContactPhone" label="手机号码" align="center" />
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    queryUsers
  } from '@/api/users/users'
  export default {
    name: 'user-choose',
    props: {
      dialogTitle: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px'
        },
        tableHeight: window.innerHeight,
        loading: true,
        // 返回结果集
        tableData: [],
        operation: {},
        // 合计条数
        total: 0,
        queryParams: {
          queryText: undefined,
          pageSize: 20,
          orderBy: 'su.Id',
          sort: 'descending',
          queryData: '',
          sortData: '',
          groupData: '',
          sceneId: 13,
          sceneType: 1,
          focusId: 0
        },
        selectionIds: [],
        loadingSave: false
      }
    },
    created() {
      var that = this
      that.getList()
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true
        let postForm = this.queryParams
        queryUsers(postForm).then(res => {
          this.loading = false
          if (res.status) {
            this.tableData = res.outputData.DataSource
            this.total = res.outputData.TotalCount
          }
        })
      },
      //获取选中数据
      getSelectionIds() {
        this.selectionIds = []
        this.$refs.tableGrid.selection.forEach(element => {
          this.selectionIds.push(element.Id)
        })
      },
      cancel(reload) {
        this.$$parent(this, "doClosePop", reload)
      },
      submitForm() {
        var selectData = []
        this.$refs.tableGrid.selection.forEach(element => {
          selectData.push({
            value: element.Id,
            label: element.UserName
          })
        })
        if (selectData.length == 0) {
          this.$message.warning('请选择资源')
          return
        }
        this.$$parent(this, "doSaveUserChoose", selectData)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .my-search-row .el-form {
    padding: 10px 5px !important;
  }

  .my-search-row .el-form--inline .el-form-item {
    margin-bottom: 0;
  }
</style>
